<template>
    <div>
      <el-header ><h3>服务类型</h3></el-header>
      <el-table :row-class-name="tableRowClassName"
      :data="tableData"
      border
      style="width: auto">
      <el-table-column
        prop="type"
        label="服务类型"

        align="center">
      </el-table-column>

      <el-table-column
        label="操作"

        align="center">
        <p>操作</p>
        <!-- slot-scope="scope" -->
        <template slot-scope="scope">
          <!-- type里的选项只是颜色 -->
          <!-- 这些方法用于打开对话框，名字要和真正实现的方法，事件名区分 -->
          <el-button type="success" size="mini" @click="info(scope)">查看</el-button>
          <!-- <el-button type="warning" size="mini" @click="update(scope)">修改</el-button>
          <el-button type="danger" size="mini"  @click="del(scope)">删除</el-button> -->

        </template>
      </el-table-column>
    </el-table>
    </div>
</template>

<script>
export default {
         data() {
      return{
          current: {} ,  // 记录当前哪条数据被选中了
           tableData:[],

      }
    },
    methods:{
      tableRowClassName({row, rowIndex}) {
              if (rowIndex%2 === 1) {
                return 'warning-row';
              } else if (rowIndex%2 === 0) {
                return 'success-row';
              }
              return '';
            },
        info:function(scope){
        // scope.$index  获取当前第几个元素被点击了
        // scope.row 获取当前行的数据
        console.log(scope.row)
        this.current = scope.row

        console.log("它的id："+this.current.id)

        // this.id=this.current.id
        this.$router.push({
            path:'/servicetypelist',
            // 同级路由传参方式
            query:{
                // 服务类型id
                id:this.current.id,
                // 服务类型名
                type:this.current.type,
                // 不用传小区cid，全局共享
                // cid:window.sessionStorage.getItem("cid")

            }
        })
        }
    },
      mounted(){
      this.$axios.get("http://localhost:8080/service/type/findall").then(res =>{
         console.log(res.data)//ResponseResult
        console.log(res.data.data)
        this.tableData = res.data.data

      })
    }
}
</script>

<style>
  .el-table .warning-row {
      background: oldlace;
    }

    .el-table .success-row {
      background: #f0f9eb;
    }
</style>
